<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style type="text/css">
    * { font: 13px/1.5 '微软雅黑'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -box-sizing: border-box; padding:0; margin:0; list-style:none; box-sizing: border-box; }
    body, html { height:100%; overflow:hidden; }
    body { background:#93defe; background-size: cover; }
    a { color:#27A9E3; text-decoration:none; cursor:pointer; }
    img{ border:none;}

    .login_box{ width:1100px; margin:120px auto 0;}
    .login_box .login_l_img{ float:left; width:432px; height:440px; margin-left:50px;}
    .login_box .login_l_img img{width:500px; height:440px; }
    .login {height:360px; width:400px; padding:50px; background-color: #ffffff;border-radius:6px;box-sizing: border-box; float:right; margin-right:50px; position:relative; margin-top:50px;}
    .login_logo{ width:120px; height:120px; border:5px solid #93defe;border-radius:100px; background:#fff; text-align:center; line-height:110px; position:absolute; top:-60px; right:140px;}
    .login_name{ width:100%; float:left; text-align:center; margin-top:20px;}
    .login_name p{ width:100%; text-align:center; font-size:18px; color:#444; padding:10px 0 20px;}
    .login_logo img{ width:60px; height:60px;display: inline-block; vertical-align: middle;}
    input[type=text], input[type=file], input[type=password], input[type=email], select { border: 1px solid #DCDEE0; vertical-align: middle; border-radius: 3px; height: 50px; padding: 0px 16px; font-size: 14px; color: #555555; outline:none; width:100%;margin-bottom: 15px;line-height:50px; color:#888;}
    input[type=text]:focus, input[type=file]:focus, input[type=password]:focus, input[type=email]:focus, select:focus { border: 1px solid #27A9E3; }
    input[type=submit], input[type=button] { display: inline-block; vertical-align: middle; padding: 12px 24px; margin: 0px; font-size:16px; line-height: 24px; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; color: #ffffff; background-color: #27A9E3; border-radius: 3px; border: none; -webkit-appearance: none; outline:none; width:100%; }
    .copyright { font-size:14px; color:#fff; display:block;width:100%; float:left; text-align:center; margin-top:60px;}

    #b1{
        width: 300px;
    }

</style>
<body>
<div id="app">
    <div class="login_box">
        <div style="display: inline"><img src="../img/login-img.png" ></div>
        <div class="login" style="display: inline-block">
            <div class="login_logo"><a href="#"><img src="../img/login_logo.png"></a></div>
            <div class="login_name">
                <p>员工管理系统</p>
            </div>
            <el-form :model="adminInfo" status-icon :rules="rules" ref="adminInfo">
                <el-form-item prop="username">
                    <el-input v-model="adminInfo.username" placeholder="请输入账号" clearable></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="adminInfo.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" id="b1" @click="submitForm('adminInfo')" round>登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="copyright">好医生有限责任公司 版权所有©2021 </div>
    </div>
</div>
<script>
    var haha = new Vue({
        el:"#app",
        data:{
            adminInfo:{},
            rules:{
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
                ]
            }
        },
        methods:{
            submitForm(formName){
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/demo/admin/login",haha.adminInfo,function (backData) {
                            if (backData.code == 0){
                                haha.$notify.error({
                                    title: '温馨提示',
                                    message: '密码输入错误'
                                });
                            }else if (backData.code == 1){
                                window.location.href = "/demo/admin/adminMain.html"
                            }
                        });
                    }
                });
            },
            resetForm(formName) {
                haha.$refs[formName].resetFields();
            }
        }
    });
</script>
</body>
</html>
